<template>
	<div id="app">
		<div class="header">
			<a href="javascript:;" class="tt"><img src="./assets/email.png" alt="" @click="shou"></a>
			<a href="javascript:;" class="tt">今日头条<img src="./assets/refresh.png" alt="" /></a>
			<a href="javascript:;"><img src="./assets/search.png" alt="" /></a>
		</div>
		<div class="nav">
			<div class="swiper-container v">
				<div class="swiper-wrapper">
				
					<div class="swiper-slide">
					<router-link to='/Hello'>首页</router-link>
						<router-link to='/yi'>视频</router-link>
						<router-link to='/er'>热点</router-link>
						<router-link to='/san'>社会</router-link>
						<router-link to='/si'>娱乐</router-link>
						<router-link to='/wu'>军事</router-link>
					</div>
					<div class="swiper-slide">
						<router-link to='/liu'>科技</router-link>

						<router-link to='/qi'>汽车</router-link>

						<router-link to='/ba'>体育</router-link>

						<router-link to='/jiu'>财经</router-link>

						<router-link to='/shi'>推荐</router-link>

						<router-link to='/shiyi'>休闲</router-link>
					</div>
				</div>
			</div>
		</div>
		<router-view id="aaa"></router-view>
		<div id="kuai" v-show='xy'>
			<img src="./assets/36b8354a1232ebd21d8cda2e8de372a7.png" alt=""  @click="hide"/>
		</div>
	</div>
</template>

<script>
	import swiper from 'vue-awesome-swiper'
	export default {
		name: 'app',
		data () {
			return {
			   xy:false
			}
		},
		mounted() {

			var newSwiper = new Swiper(".v", {
				observer: true, //当swiper和swiper的子元素发生改变时，重新初始化
				oberverParents: true, //当swiper的父元素发生改变时，重新初始化
			})
		},
		methods: {
			shou: function() {
				this.xy = true
			},
			hide: function(){
				this.xy =false
			}
		
		}
		
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
	
	
	.header {
		width: 100%;
		height: 2.1rem;
		background: #D03C3C;
		display: flex;
		justify-content: space-between;
		line-height: 2.1rem;
		color: white;
	}
	
	.header a {
		color: white;
		text-decoration: none;
		font-size: 1rem;
		font-weight: bold;
		padding: 0 .6rem;
	}
	
	.swiper-container {
		width: 100%;
		height: 2.5rem;
		background-color: #EEEEEE;
	}
	
	.swiper-slide {
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-weight: bold;
	}
	
	.swiper-slide a {
		color: #333;
	}
	
	.router-link-active:hover {
		color: red;
	}
	.header img{
		width: 15px;
		height: 15px;
	}
	#kuai{
	width: 100%;
	height: 35rem;
	background-color: rgba(0,0,0,0.5);
	/*background-color: red;*/
	position: absolute;
	top: 0 ;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
}
	#aaa{
	width: 100%;
	height: 29rem;
	overflow: auto;
	
	
	}
</style>